<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
针对事件提供了多种修饰符 表示当我们事件在某个种情况下出现了一些不想要的效果 如何处理
-->
<div id="app">
    {{name}}
    <!--超链接会跳转到百度 但是我想点击超链接执行自己的操作-->
    <!--.prevent阻止默认行为-->
    <a href="http://www.baidu.com" @click.prevent="show1()">百度</a>

    <!--once事件只触发一次-->
    <button @click.once="show1()">点击我</button>

    <!--.stop阻止事件冒泡-->
    <div @click="show1()" style="width: 100px; height: 100px; background-color: red;">
        <button @click.stop="show1()">点击我</button>
        <!--事件修饰符可以连续写-->
        <a href="http://www.baidu.com" @click.prevent.stop="show1()">百度</a>
    </div>



</div>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'zs'
            }
        },
        methods:{
           show1() {
               alert("你好");
           }
        }
    });
</script>

</body>
</html>